<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <tg-ui-modal
    class="edit-project-modal"
    [open]="showEditProjectModal"
    [width]="500"
    (requestClose)="close()">
    <ng-container>
      <div
        data-test="edit-project-modal"
        role="dialog"
        aria-labelledby="edit-project-modal"
        aria-modal="true">
        <h1
          id="edit-project-modal"
          class="title">
          {{ t('common_project.forms.project_details') }}
        </h1>
        <form
          class="project-form"
          #formTpl="ngForm"
          [formGroup]="form"
          (ngSubmit)="submit()">
          <!-- Project name -->
          <tg-ui-input [label]="t('common_project.forms.project_name')">
            <input
              formControlName="name"
              data-test="input-name"
              inputRef
              tuiAutoFocus
              maxlength="80" />
            <ng-container inputError>
              <tg-ui-error
                [enabled]="formTpl.submitted"
                data-test="name-required-error"
                error="required">
                {{ t('common_project.forms.project_name_error') }}
              </tg-ui-error>
            </ng-container>
          </tg-ui-input>

          <!-- Project description -->
          <tg-ui-textarea
            [label]="t('common_project.forms.project_description')"
            [optional]="true">
            <tui-text-area
              class="general-textarea"
              formControlName="description"
              data-test="input-description"
              [expandable]="true"
              [maxLength]="200">
              {{ t('common_project.forms.project_description_placeholder') }}
            </tui-text-area>
            <tg-ui-error
              inputError
              [enabled]="formTpl.submitted"
              data-test="description-maxlength-error"
              error="maxlength">
              {{ t('common_project.forms.max_length_error') }}
            </tg-ui-error>
          </tg-ui-textarea>

          <!-- Image upload  -->
          <tg-ui-image-upload
            [color]="project.color"
            [control]="logo"
            [title]="form.get('name')!.value"
            [label]="t('common_project.forms.project_icon')"
            [formatError]="t('common_project.forms.format_no_svg_error')"
            [tip]="t('common_project.forms.choose_image_no_svg_tip')"
            [initialImage]="project.logoLarge"
            accept="image/webp, image/gif, image/jpg, image/jpeg, image/png">
          </tg-ui-image-upload>

          <div class="actions">
            <button
              type="button"
              (click)="close()"
              data-test="cancel-edit-project"
              tuiLink>
              {{ t('commons.cancel') }}
            </button>
            <button
              data-test="submit-edit-project"
              tuiButton
              type="submit"
              appearance="primary">
              {{ t('commons.save_changes') }}
            </button>
          </div>
        </form>
      </div>
    </ng-container>
  </tg-ui-modal>

  <tg-discard-changes-modal
    [open]="showConfirmEditProjectModal"
    (discard)="discard()"
    (cancel)="keepEditing()"></tg-discard-changes-modal>
</ng-container>
